<template>
  <div>
   <div class="foot" v-if="$route.meta.keepAlive">
     <div class="same">
        <ul class="nav">
          <li v-for="(item,i) in routes" :key="item.path"  @click="avat(i)">
           <router-link :to="item.path"> 
             <i :class="avtaic==i? item.meta.avatice : item.meta.i"></i>
             {{ item.meta.til }}
             </router-link>
          </li>
      </ul>
    </div>
  </div>
  </div>
</template>
<script>
import { routes } from "../router";

export default {
components: {},
  data () {
   return {
     avtaic:0
   }
  },
   computed: {
    routes() {
      return routes.filter((item) => !item.hidden);
      // return this.$router.options.routes;
    },
  },
   methods:{
     avat(i){
       this.avtaic=i
     }
   }
}
</script>
<style scoped lang="scss">
.foot{
  width: 100%;
  height: 10vh;
  background: #fff;
}
.nav{
  width: 100%;
  display: flex;
  li{
    width: 20vw;
    height: 10vh;
    // background: red;
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    i{
      display: block;
      font-size: 30px;
     
    }
    a{
      color: #333;
      font-size: 16px;
    }
  }
}
</style>